<template>
    <scroll-view scroll-x="true" class="scroll-view-t" :scroll-into-view="navbarsId">
        <view v-for="(item, index) in navbars" :key="item.id" :class="['tabs']" :id="'tab' + index"
            @click="changeTab(index)">
            {{ item.title, item.id }}
            <view class="line" v-if="currentIndex == index"></view>
        </view>
    </scroll-view>

    <swiper :autoplay="false" :duration="250" :current="currentIndex" :style="`height:${height}rpx`" @change="changeIndex"
        class="swiperBox">
        <swiper-item v-for="(element, index) in navbars" :key="index" class="swiper-item">
            <view v-for="(item, j) in element.newList" :key="j" class="itemBox" @click="routeterNews(item)">
                <view class="title">
                    {{ item.title }}
                </view>
                <view class="views">
                    浏览量：{{ item.views }}
                </view>
            </view>
        </swiper-item>
    </swiper>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { requestApi } from '@/api';
import { setKey } from '@/utils/storage';
// 獲取this
const _this = getCurrentInstance().appContext.config.globalProperties
const params = {
    region: 'TaiWan',
}
const height = ref(120)
async function getNewsByRegion() {
    const { data, status } = await requestApi.getNewsByRegion(params)
    if (status == 0) {
        for (let i = 0; i < data.length; i++) {
            data[i].views = Math.floor(Math.random() * (100000 - 1 + 1)) + 1
        }
        navbars.value.forEach(item => {
            const count = Math.ceil(data.length / navbars.value.length)
            item.newList = data.splice(0, count)
            height.value = 120 * count
        })
    }
}

const navbars = ref([
    {
        id: "1",
        title: _this.$t('index.nav.news1'),
        newList: [],
    },
    {
        id: "2",
        title: _this.$t('index.nav.news2'),
        newList: [],
    },
    {
        id: "3",
        title: _this.$t('index.nav.news3'),
        newList: [],
    },
    {
        id: "4",
        title: _this.$t('index.nav.news4'),
        newList: [],
    },
    {
        id: "5",
        title: _this.$t('index.nav.news5'),
        newList: [],
    },
])
const navbarsId = ref('')
const currentIndex = ref(0)
function changeIndex(e) {
    currentIndex.value = e.detail.current
}
function changeTab(index) {
    if (currentIndex.value == index) return
    currentIndex.value = index
    if (currentIndex.value < 6) {
        navbarsId.value = 'tab' + index
    }

}

async function routeterNews(params) {
    const url = await new Promise((resolve, reject) => {
        setKey('newsItem', params)
        resolve('/pages/news/news')
    })
    uni.navigateTo({ url })
}




onMounted(() => {
    getNewsByRegion()
})


</script>

<style lang="scss">
.scroll-view-t {
    white-space: nowrap;
    height: 50rpx;
    line-height: 50rpx;
    margin-top: 40rpx;
    // background-color: #fff;

    .tabs {
        color: #B9C0D4;
        display: inline-block;
        margin: 0 15rpx;
        font-size: 28rpx !important;
        font-family: "Light";
        // box-sizing: border-box;
        position: relative;

        .line {
            position: absolute;
            bottom: 0rpx;
            width: 100%;
            color: #fff;
            border-bottom: solid #488BF7 6rpx;
            transition: all .25s;
        }
    }

}

.swiperBox {
    padding: 37rpx 25rpx;
    background-color: #20212A;
    border-radius: 0px 0px 28rpx 28rpx;

    .swiper-item {
        color: #fff;

        .itemBox {
            position: relative;
            height: 120rpx;
            background-color: #20212A;

            .views {
                position: absolute;
                right: 0rpx;
                bottom: 47rpx;
                // background-color: #488BF7;
                font-weight: 400;
                text-align: center;
                font-size: 18rpx;
                color: #999;
                letter-spacing: 10rpx;
                // width: 130rpx;
                height: 26rpx;
            }
        }
    }

}
</style>